<template>
<div>
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <header class="hd-top">
    <span class="iconfont icon-left" @click="goBack"></span>
    <h2 class="title">接单</h2>
  </header>
  <div class="page">
    <!-- <div class="dri-adv">
      <div class="pic"><img src="~images/bg/adv.png"></div>
    </div> -->
    <div class="grab-list">
      <div class="grab-wrap" v-for="item in todolist">
        <p class="tit green">有新订单啦！</p>
        <div class="addr ft17"><span class="dotted"></span>{{item.DepartureCity | city}} {{item.DepartureDistrict | district}}</div>
        <div class="addr ft17"><span class="dotted org"></span>{{item.ArrivalCity | city}} {{item.ArrivalDistrict | district}}</div>
        <div class="statis ft14 displayflex">
          <span>{{item.OrdersWeight | weight}}，{{item.OrdersVolumn}}，共{{item.OrdersPKGS}}件</span>
          <div class="flex1 txt-rit">运费<em class="org">￥</em><span class="price org ft16">206.00</span></div>
        </div>
        <div class="btn">接单</div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default{
  data(){
    return{
      todolist: [],
      showLoad: false,
    }
  },
  computed:{
    userinfo(){
      if(localStorage.UserInfo){
        return JSON.parse(localStorage.UserInfo)
      };
    },
  },
  created() {
    this.getData();
  },
  methods:{
    getData(){
      var query = {
        DriverGuid: this.userinfo.StaffID,
        State: 12,
      },
      _this = this;
      _this.showLoad = true;
      _this.Ajax.post('SearchTakableOrderList',query).then(function(resp){
        _this.showLoad = false;
        if(resp.IsSuccess){
          _this.todolist = resp.Datas;
        }
      });

    },
    goBack(){
      this.$router.go(-1)
    },
  }
}
</script>